import React, {Component} from 'react';
import {
    NavigationContainer,
    DarkTheme as NavigationDarkTheme,
    DefaultTheme as NavigationDefaultTheme,
} from '@react-navigation/native';
import {
    DarkTheme as PaperDarkTheme,
    DefaultTheme as PaperDefaultTheme,
    Provider as PaperProvider,
} from 'react-native-paper';
import merge from 'deepmerge';
import Ionicons from 'react-native-vector-icons/Ionicons';
// import {createMaterialBottomTabNavigator} from "@react-navigation/material-bottom-tabs";
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
// import {createNativeStackNavigatore} from "@react-navigation/native-stack";
import {getHeaderTitle} from '@react-navigation/elements';

import {Provider as StoreProvider} from 'react-redux'
import store from "../redux/store"
import {PreferencesContext} from '../context/app_context'
import Header from "../components/Header";
import Home from "../pages/Home";
import User from "../pages/User";
import HomeScreen from "../pages/HomeScreen";
import MyDrawer from "../components/MyDrawer";

const CombinedDefaultTheme = merge(PaperDefaultTheme, NavigationDefaultTheme);
const CombinedDarkTheme = merge(PaperDarkTheme, NavigationDarkTheme);

// const Tab = createMaterialBottomTabNavigator()
// const Stack=createNativeStackNavigatore()
const Tab = createBottomTabNavigator()
const paperDarkTheme = {
    ...CombinedDarkTheme,
    roundness: 2,
    colors: {
        ...CombinedDarkTheme.colors,
        primary: '#2196f3',
        accent: '#2196f3',
    },
};
const paperDefaultTheme = {
    ...CombinedDefaultTheme,
    roundness: 2,
    colors: {
        ...CombinedDefaultTheme.colors,
        primary: '#3f51b5',
        accent: '#1f9fff',
        text: 'black'
    },
};

const App = () => {
    const [isThemeDark, setIsThemeDark] = React.useState(false);
    let theme = isThemeDark ? paperDarkTheme : paperDefaultTheme

    const toggleTheme = React.useCallback(() => setIsThemeDark(!isThemeDark), [isThemeDark])
    const preference = React.useMemo(() => ({toggleTheme, isThemeDark}), [toggleTheme, isThemeDark])
    return (
        <StoreProvider store={store}>
            <PreferencesContext.Provider value={preference}>
                <PaperProvider theme={theme}>
                    <NavigationContainer theme={theme}>
                        <Tab.Navigator initialRouteName='Home' barStyle={{backgroundColor: '#694fad'}}
                                       screenOptions={({route}) => ({
                                           tabBarIcon: ({focused, color, size}) => {
                                               let iconName;
                                               if (route.name === 'Home') {
                                                   iconName = focused
                                                       ? 'chatbox-ellipses'
                                                       : 'chatbox-ellipses-outline';
                                               } else if (route.name === 'User') {
                                                   iconName = focused ? 'chatbubble-outline' : 'chatbubble';
                                               } else if (route.name === 'HomeScreen') {
                                                   iconName = focused ? 'clipboard-outline' : 'clipboard'
                                               }

                                               // You can return any component that you like here!
                                               return <Ionicons name={iconName} size={size} color={color}/>;
                                           },
                                           tabBarActiveTintColor: 'brown',
                                           tabBarInactiveTintColor: 'gray',
                                           tabBarBadge: 3,
                                           header: ({navigation, route, options, layout}) => {
                                               const title = getHeaderTitle(options, route.name);
                                               return <Header title={title}/>
                                           }
                                       })}>
                            <Tab.Screen name='Home' component={Home}/>
                            <Tab.Screen name='User' component={User}/>
                            <Tab.Screen name='HomeScreen' component={HomeScreen}/>
                            {/*<MyDrawer/>*/}
                        </Tab.Navigator>
                    </NavigationContainer>
                </PaperProvider>
            </PreferencesContext.Provider>
        </StoreProvider>
    );
}

export default App;